<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>避暑山庄智能助手与知识图谱</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <!-- 在 head 标签中添加 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- FilePond 样式 -->
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <link href="/static/css/style.css" rel="stylesheet">
    <style>
        body {
            background-color: #f0f2f5;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        .content-section {
            display: none;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        
        .content-section.active {
            display: block;
            opacity: 1;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #1a5f7a 0%, #2d8a61 100%);
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .navbar-dark .navbar-nav .nav-link {
            color: rgba(255, 255, 255, 0.9);
            margin: 0 0.5rem;
        }
        
        .navbar-dark .navbar-nav .nav-link:hover {
            color: #ffffff;
        }
        
        .shadow-hover:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    {% include 'components/header.html' %}
    {% include 'components/chat.html' %}
    {% include 'components/graph.html' %}
    {% include 'components/nodeData.html' %}
    {% include 'components/message.html' %}
    {% include 'components/profile.html' %}

    <div id="tooltip" class="tooltip"></div>

    <!-- 确保 main.js 最先加载 -->
    <script src="/static/js/main.js"></script>
    <!-- FilePond 脚本 -->
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
    <script src="/static/js/chat.js"></script>
    <script src="/static/js/graph.js"></script>
    <script src="/static/js/search.js"></script>
    <script src="/static/js/message.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="/static/js/nodeData.js"></script>
</body>
</html>


<!-- 在 script 标签中添加搜索功能 -->
<script>
    function search() {
        const query = document.getElementById('searchInput').value;
        if (!query.trim()) return;

        fetch(`/api/search?name=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(function(data) {
                if (!data.success) {
                    alert(data.message);
                    return;
                }

                // 切换到图谱视图
                switchContent('graph');
                
                const detailsContent = document.getElementById('detailsContent');
                detailsContent.innerHTML = '<h4 class="mb-4">搜索结果</h4>';
                
                // 显示搜索结果
                data.data.forEach(item => {
                    const properties = item.properties;
                    const div = document.createElement('div');
                    div.innerHTML = `
                        <div class="p-4 bg-white rounded-lg shadow mb-3">
                            <h3 class="text-xl font-bold mb-2">${properties.name}</h3>
                            <p class="text-gray-700">${properties.description || '暂无描述'}</p>
                        </div>
                    `;
                    detailsContent.appendChild(div);
                });
            })
            .catch(error => {
                console.error('搜索出错:', error);
                alert('搜索过程中出现错误，请稍后重试');
            });
    }

    // 为搜索框添加回车事件监听
    document.getElementById('searchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            search();
        }
    });
</script>